<template>
  <!-- 目录页 -->
  <div id="contain" :style="containStyle">
    <header-info></header-info>
    <div class="menu-contain">
      <div class="menu" align="center" @click="clickMenu('edit')">
        <img src="@assets/expense/login_bg_edit.png">
        <div class="title-edit">报销填报</div>
      </div>
      <div class="menu" align="center" @click="clickMenu('search')">
        <img src="@assets/expense/login_bg_search.png">
        <div class="title-search">报销查询</div>
      </div>
      <div class="menu" align="center" @click="clickMenu('approve')" v-if="roleIds.length !== 0">
        <img src="@assets/expense/login_bg_approve.png">
        <div class="title-search">报销审批</div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderInfo from './header'
import { mapGetters } from 'vuex'
export default {
  components: {
    HeaderInfo
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      roleIds: [],
      containStyle: {},
      pcContainStyle: {
        width: '30%',
        position: 'absolute',
        left: '40%'
      },
      flag: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
    }
  },
  created () {
    this.roleIds = this.userInfo.roles
    if (!this.flag) {
      Object.assign(this.containStyle, this.pcContainStyle)
    }
  },
  methods: {
    clickMenu (mode) {
      if (mode === 'edit') {
        this.$router.push({ name: 'appFillinMain', query: { mode: mode } })
      } else {
        this.$router.push({ name: 'appHistoryMain', query: { mode: mode } })
      }
    }
    /* findRole () {
      query('/wb/ribs/findRole', 'GET', {}, {}).then(res => {
        this.roleIds = res.result.data
        console.log('resbxdh', res.result.data)
      }).catch(() => {
        this.$notification['info']({
          message: '获取人员信息失败',
          duration: 4
        })
      })
    } */
  }
}
</script>
<style lang="less" scoped>
#contain {
  height: 100%;
  background-color: #f2f2f2;
}
.menu-contain {
    margin: -30px 10px 10px;
    .menu {
      height: 140px;
      border-radius: 5px;
      margin: 0px;
      position: relative;
      img {
        height: 140px;
        width: 98%;
      }
      .title-edit {
        font-size: 25px;
        color: #94999e;
        position: absolute;
        top: 46px;
        left: 50%;
        margin-left: -30px;
        z-index: 2;

      }
      .title-search {
        font-size: 25px;
        color: #94999e;
        position: absolute;
        top: 45px;
        left: 50%;
        margin-left: -30px;
        z-index: 2;
      }
    }
}
</style>
